<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script>
        // 嵌套for循环
        // 案例8: 在页面上用红色的❤打印7*7的正方形

        // 案例9: 在页面上用红色的❤打印正三角
        // 案例10: 在页面上用红色的❤打印倒三角
        // 案例11: 打印九九乘法表♂'
        // 案例12: 用for循环在页面输出 h1-h6标签，内容为'这是h?标签'

        // 案例13: 统计字符串 "hello world"中'o'和'l'总共出现了多少次
        // var str = "hello worldhello worldhello worldhello world"
        // var num = 0;
        // for (var i = 0; i < str.length; i++) {
        //     if (str[i] == "o" || str[i] == "l") {
        //         num++
        //     }
        // }
        // console.log(num)


        // 其他案例
        // 案例14: 把字符串 "123hello520"                
        // 每一个数字乘以5，其他不变
        // 组成一个新字符串，输出到控制台

        // var str = "123hello520"
        // var str1 = ""
        // for (var i = 0; i < str.length; i++) {
        //     if (isNaN(str[i])) {
        //         // 是非数字
        //         str1 += str[i]
        //     } else {
        //         // 是数字
        //         str1 += str[i] * 5
        //     }
        // }
        // console.log(str1)

        //案例16: 求任意个数的累加和
        // 步骤1: 弹出输入框询问用户 要输入多少个整数
        // 步骤2: 循环获取用户输入的数累加
        // var a = +prompt("请输入你要输入整数的数量")
        // var sum = 0
        // for (var i = 1; i <= a; i++) {
        //     var b = +prompt(`请输入你要输入的第${i}个数`)
        //     sum += b
        // }
        // console.log(sum)


        //案例15:反转字符串
        //将"JavaScript"反转成"tpircSavaJ"
        // var str = "JavaScript"
        // var str1 = ""
        // for (var i = str.length - 1; i >= 0; i--) {
        //     console.log(str[i])
        //     str1 += str[i]
        // }
        // console.log(str1)
        //案例17: 猜数游戏 (while 和 do while两种做法)


    // </script>

    <!-- <style>
        /* .box {
            display: inline-block;
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 20px;
            background: red;
            border: 20px solid black;
            box-sizing: border-box;
        } */
    </style> -->
    <div class="box"></div>
</body>

</html>